<template>
  <div class="common-layout">
    <el-container>
      <!-- 头部 -->
      <el-header>
        <!-- 图片 -->
        <img src="../assets/logo.png" alt="">
        <span>后台管理系统</span>

        <!-- 用户头像及退出功能 -->
        <el-dropdown>
          <el-avatar
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        />
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="loginOut">退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

      </el-header>
      <el-container>

        <!-- 侧边栏 -->
        <el-aside :width="$store.state.ToggleSide?'65px':'200px'">
          <Menu />
        </el-aside>

        <!-- 主体 -->
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script setup>
import Menu from './menu'
import Home from './home/index.vue'
import { useStore } from 'vuex'

const store = useStore()

// 退出功能
const loginOut = () => {
  store.dispatch('loginOut')
}

</script>

<style scoped lang="less">
.common-layout{
  height: 100%;
  .el-container{
    height: 100%;
  }
}
.el-header{
  padding: 0;
  background-color: #373d41;
  overflow: hidden;
  line-height: 60px;
  img{
    width: 200px;
    margin-top: -20px;
    vertical-align: top;
  }
  span{
    color: #fff;
    font-size: 18px;
    margin-left: 10px;

  }
  .el-dropdown{
    float: right;
    .el-avatar{
      margin-right: 30px;
      margin-top: 10px;
      cursor: pointer;
    }
  }
}
.el-aside{
  background-color: #333744;
}
.el-main{
  background-color: #fff;
  // 去除双重滚动条
  // overflow-y: hidden;
}

</style>
